<template>
  <div>
    <form-view v-if="this.formType=='zdybd'" ref="formView" :formId="formId" :dataId="dataId" :style="isHandleAct"
               @saveCallback="saveCallback" :disabled="disabled"
    ></form-view>

    <component v-if="this.formType=='wbbd'"  ref="formView" :is="routeFormComponent"  :dataId="dataId"
               @saveCallback="saveCallback" :disabled="disabled"></component>

    <!--流程审批 节点有表单-->
    <a-form-item v-if="hasNodeForm"
                 :wrapperCol="{ span: 24 }"
    >
      <a-form ref="form" :model="form" :labelCol="{span: 4}"
              :wrapperCol="{ span: 18 }">
        <a-form-item label="下一审批人" prop="assignees" v-show="showAssign" :labelCol="{span: 4}"
                     :wrapperCol="{ span: 18 }">
          <a-select
            v-model="form.assignees"
            placeholder="请选择"
            allowClear
            mode="multiple"
            :loading="userLoading"
          >
            <a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{item.realname}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="下一审批人" v-show="isGateway" :labelCol="{span: 4}"
                     :wrapperCol="{ span: 18 }">
          <a-alert  type="info" showIcon message="分支网关处不支持自定义选择下一审批人，将自动下发给所有可审批人。">，将发送给下一节点所有人
          </a-alert>
        </a-form-item>
        <a-form-item label="消息通知">
          <a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox>
          <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox>
          <a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox>
        </a-form-item>
      </a-form>
    </a-form-item>

    <!--流程审批 节点有表单-->
    <a-form-item :wrapperCol="{ span: 24 }">
      <a-form :labelCol="{span: 4}" :wrapperCol="{ span: 18 }">
        <a-form-item label="是否抄送" :labelCol="{span: 4}" :wrapperCol="{span: 18}">
          <a-checkbox @change="onChoose"></a-checkbox>
        </a-form-item>
        <a-form-item label="抄送给" ::labelCol="{span: 4}" :wrapperCol="{ span: 18 }" :hidden="userVisibleChoose">
          <j-select-multi-user v-model="userNames" style="width:100%"/>
        </a-form-item>
      </a-form>
    </a-form-item>


    <!--流程办理按钮 节点没有表单-->
    <a-form-item v-if="!hasNodeForm"
                 :wrapperCol="{ span: 24 }"
                 style="text-align: center"
    >
      <a-button type="primary"  @click="passTask">通过</a-button>
      <a-button style="margin-left: 8px"  @click="backTask">驳回</a-button>
      <a-button type="danger" style="margin-left: 8px"  @click="endTask">终止</a-button>
    </a-form-item>

    <!--流程办理按钮 节点有表单-->
    <a-form-item v-if="hasNodeForm"
                   :wrapperCol="{ span: 24 }" style="text-align: center"
    >
      <a-button type="primary" :disabled="btndisabled" @click="saveForm">通过</a-button>
      <a-button style="margin-left: 8px" @click="backTask">驳回</a-button>
      <a-button type="danger" style="margin-left: 8px"  @click="endTask">终止</a-button>
    </a-form-item>

  </div>
</template>

<script>
  import FormView from "@/components/form/FormView";
  import JSelectMultiUser from '@/components/ksourcebiz/JSelectMultiUser'

  export default {
    name: 'FormDataEdit',
    components: {
      FormView,
      JSelectMultiUser,
    },
    props:{
      /*流程数据*/
      processData:{
        type:Object,
        default:()=>{return {}},
        required:false
      },
    },
    data () {
      return {
        url:{
          getNextNode:'/activiti_process/getNextNode',
          getNode:'/activiti_process/getNode',
          passForm:'/actTask/pass',
        },
        form: {
          id: "",
          userId: "",
          procInstId: "",
          comment: "",
          type: 0,
          assignees: [],
          backTaskKey: "-1",
          sendMessage: true,
          sendSms: false,
          sendEmail: false
        },
        formType:"",
        routeUrl:"",
        formId:"",
        dataId:"",
        disabled: false,
        btndisabled: false,
        hasNodeForm:false,
        userLoading: false,
        assigneeList: [],
        showAssign: true,
        error: "",
        routeFormComponent:"",
        isGateway: false,
        userNames: "",
        userVisibleChoose: true
      }
    },
    created() {
      console.log("流程数据",this.processData)
      if(!this.processData.nodeFormType){
        this.formId=this.processData.formId
        this.dataId=this.processData.tableId
        this.formType=this.processData.formType;
        this.routeUrl=this.processData.routeUrl;
        this.disabled = true;
      }else{
        this.formId=this.processData.nodeFormId
        this.dataId=this.processData.nodeTableId
        this.formType=this.processData.nodeFormType;
        this.routeUrl=this.processData.nodeRouteUrl;
        this.hasNodeForm=true;
      }
      this.initFormExt();
      if(this.formType=='wbbd'){
        var myComponent =() => import("@/views/"+this.routeUrl);
        this.routeFormComponent = myComponent;
      }
    },
    methods: {
      onChoose(obj) {
        this.userNames = "";
        if (obj.target.checked) {
          this.userVisibleChoose = false;
        } else {
          this.userVisibleChoose = true;
        }
        console.log(this.userNames);
      },
      isHandleAct(){
        if(this.disabled && this.hasNodeForm){
          return "padding-bottom: 20px"
        }else{
          return "";
        }
      },
      initFormExt(){
        this.form.id = this.processData.id;
        this.form.procInstId = this.processData.procInstId;
        this.form.priority = this.processData.priority;
        this.form.type = 0;
        this.getAction(this.url.getNextNode,{procDefId:this.processData.procDefId, currActId:this.processData.key, procInstId:this.processData.procInstId}).then(res => {
          this.userLoading = false;
          if (res.success) {
            if (res.result.type == 3 ||res.result.type == 4) {
              this.isGateway = true;
              this.showAssign = false;
              this.error = "";
              return;
            }
            this.isGateway = false;
            if (res.result.users && res.result.users.length > 0) {
              this.error = "";
              this.assigneeList = res.result.users;
              // 默认勾选
              let ids = [];
              res.result.users.forEach(e => {
                ids.push(e.username);
              });
              this.form.assignees = ids;
              this.showAssign = true;
            } else {
              this.form.assignees = [];
              this.showAssign = false;
            }
          }
        });
      },
      saveFormExt(data){
        var formData = Object.assign({},this.form);
        formData.assignees = formData.assignees.join(",");
        if (this.showAssign && formData.assignees.length < 1) {
          this.$message.error("请至少选择一个审批人")
          return;
        } else {
          this.error = "";
        }
        formData.tableId=data.id;
        formData.formId=data.formId;
        formData.formType=data.formType;
        formData.routeUrl=data.routeUrl;
        formData.tableName=data.tableName;

        formData.procDefId=this.processData.procDefId;
        formData.taskName=this.processData.name;
        this.postFormAction(this.url.passForm,formData).then(res => {
          if (res.success) {
            this.$emit('afterSubmit',data)
          }
        });
      },

      saveForm() {
        this.btndisabled = true;
        this.$refs.formView.setUserNames(this.userNames);
        this.$refs.formView.saveForm();
        this.btndisabled = false;
      },
      saveCallback(formData){
        formData.formId=this.formId;
        formData.formType=this.formType;
        formData.routeUrl=this.routeUrl;
        console.log("saveCallback",formData)
        if(this.hasNodeForm){
          this.saveFormExt(formData);
        }else{
          this.$emit('afterSubmit',formData)
        }
      },
      close() {
        //todo 关闭后的回调
        this.$emit('close')
      },
      /*通过审批*/
      passTask() {
        this.$emit('getUserNames',this.userNames)
        this.$emit('passTask')
      },
      /*驳回审批*/
      backTask() {
        this.$emit('getUserNames',this.userNames)
        this.$emit('backTask')
      },
      /*终止审批*/
      endTask() {
        this.$emit('getUserNames',this.userNames)
        this.$emit('endTask')
      }
    },
  }
</script>